
import { ChangeEvent, useEffect, useState } from 'react'
import { Input, Space, Button, message } from 'antd';
import styles from "./login.module.scss"
import './login.scss'
import { LoginAPI } from '@/request/api';
import { useNavigate } from 'react-router-dom';
export default function View() {
    const NavigateTo = useNavigate();
    useEffect(() => {

    }, []);
    const [userNameVal, setUserNameval] = useState('');
    const [passWordVal, setPassWordval] = useState('');
    const userNameChange = (e:ChangeEvent<HTMLInputElement>) => {
        // 获取用户输入内容
        // console.log(e.target.value);
        // console.log('userNameVal=', userNameVal);
        setUserNameval(e.target.value);
    };
    const passWordChange = (e:ChangeEvent<HTMLInputElement>) => {
        setPassWordval(e.target.value);
    }
    const submitLogin = async () => {
        // console.log('userNameVal=', userNameVal, 'passWordVal=', passWordVal);
        if (!userNameVal.trim() || !passWordVal.trim()) {
            return alert('请输入完整信息');
        }
        let loginRes = await LoginAPI({
            name: userNameVal,
            password: passWordVal
        })

        if (loginRes.code === 200) {
            message.success('This is a success message');
            NavigateTo('/page1');
            window.localStorage.setItem('token', loginRes.token);
        } else {
            message.error(loginRes.message);
        }
        
    }
    return (
        <div className={styles.loginPage}>
            <div className={styles.loginBox}>
                <div>Login</div>
                <div className="form">
                    <Space direction="vertical" size="middle" >
                        <Input placeholder="用户名" onChange={userNameChange}/>
                        <Input.Password placeholder="密码" onChange={passWordChange}/>
                        <div className="captchBox">
                            <Input placeholder="验证码" />
                            <div className="captchaImg">
                                <img src="" alt="" />
                            </div>
                        </div>
                        <Button type="primary" block onClick={submitLogin}>Primary</Button>
                        
                    </Space>
                    
                    
                </div>
            </div>
        </div>
    )
}
